<template>
  <div>
    <a-tabs :default-active-key="defaultkey" @change="callback" size="large">
      <a-tab-pane key="1" tab="线上课程">
        <div style="overflow: hidden; hegiht: auto">
          <div>
            <div
              class="listDiv"
              v-for="(item, index) in collectList"
              :key="index"
            >
              <div
                class="dlex3-div"
                @click="
                  $router.push('/video/detailsVideo?courseNo=' + item.courseNo)
                "
              >
                <div class="image1">
                  <img
                    class=""
                    :src="imageWebUrl + item.cover"
                    @error="$event.target.src = GLOBAL.defaultCover"
                    alt=""
                  />
                </div>
                <div>
                  <span
                    class="titleTxt1"
                    style="font-weight: 600; margin-top: 12px"
                  >
                    {{ item.name }}
                  </span>
                  <div style="margin-top: 16px">
                    <span
                      v-for="(i, j) in item.labelList"
                      :key="j"
                      class="squareLabel"
                      style="margin-right: 15px"
                      >{{ i.name }}</span
                    >
                  </div>
                  <div style="margin-top: 16px">
                    <span
                      v-if="item.learnedTime"
                      class="smallPrint"
                      style="margin-right: 32px"
                      >已学到{{ item.learnedTime }}%</span
                    >
                    <span v-if="item.createDate" class="smallPrint">{{
                      item.createDate
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="dlex2-div dloDiv">
                <span class="greyBlue" v-if="item.webName"
                  >相关政策：<span v-if="item.policy == 2">{{
                    item.webName
                  }}</span
                  ><a
                    v-if="item.policy == 1"
                    :href="item.webUrl"
                    target="_blank"
                    >{{ item.webName }}</a
                  ></span
                >
                <span
                  class="greyBlue"
                  v-if="item.jobList && item.jobList.length"
                  >相关职位：
                  <a
                    @click="
                      $router.push(
                        '/employment/positionDetail?jobCode=' + i.jobCode
                      )
                    "
                    v-for="(i, j) in item.jobList"
                    :key="j"
                    v-show="i"
                    >{{ i ? i.name : "" }}</a
                  ></span
                >
                <span></span>
                <span
                  v-if="1"
                  @click="collectSave(item.courseNo)"
                  class="titleTxt7"
                  style="margin-left: 135px"
                >
                  <a-icon
                    style="margin-right: 6px; color: #eeb336"
                    type="star"
                  />
                  已收藏
                </span>
                <span v-else class="titleTxt7" style="margin-left: 135px"
                  ><a-icon style="margin-right: 6px" type="star" />
                  收藏
                </span>
              </div>
            </div>
          </div>
          <!-- 分页器 -->
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="企业培训" force-render>
        <div style="overflow: hidden">
          <div
            class="listDiv"
            v-for="(item, index) in collectList"
            :key="index"
          >
            <div
              class="dlex3-div"
              @click="
                $router.push(
                  '/education/trainDetails?id=' + item.trainNo + '&type=2'
                )
              "
            >
              <div class="image1">
                <img
                  :src="imageWebUrl + item.cover"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                />
                <span v-if="mosgolor == 1" class="stateLabel2">未开始</span>
                <span v-if="mosgolor == 2" class="stateLabel2">已结束</span>
                <span v-if="mosgolor == 3" class="stateLabel2">进行中</span>
              </div>
              <div>
                <span
                  class="titleTxt1"
                  style="font-weight: 600; margin-top: 12px"
                >
                  {{ item.trainName }}
                </span>
                <div style="margin-top: 16px">
                  <span class="squareLabel" style="margin-right: 15px">{{
                    item.trainName
                  }}</span>
                </div>
                <div style="margin-top: 16px">
                  <!-- <span class="smallPrint">已学到100%</span> -->
                  <span class="smallPrint"
                    >{{ item.startTime }} - {{ item.endTime }}</span
                  >
                </div>
              </div>
            </div>
            <div
              class="dlex2-div dloDiv"
              style="display: flex; justify-content: space-between"
            >
              <div class="cOicon-id">
                <img
                  class="imgagesOne"
                  :src="imageWebUrl + item.comLogo"
                  @error="$event.target.src = GLOBAL.defaultIconImg"
                  alt=""
                />
                <p>{{ item.comName }}</p>
              </div>
              <span
                v-if="1"
                @click="collectSave(item.trainNo)"
                class="titleTxt7"
                style="margin-left: 135px"
              >
                <a-icon style="margin-right: 6px; color: #eeb336" type="star" />
                已收藏
              </span>
              <span v-else class="titleTxt7" style="margin-left: 135px"
                ><a-icon style="margin-right: 6px" type="star" />
                收藏
              </span>
            </div>
          </div>
        </div>
      </a-tab-pane>
      <!-- <a-tab-pane key="3" tab="职业培训" force-render>
        <div style="overflow: hidden">
          职位展示区域
          <div class="coRsingleCF">
            <div
              class="listDiv"
              @click="
                $router.push(
                  '/education/trainDetails?id=' + item.trainNo + '&type=3'
                )
              "
              v-for="(item, index) in collectList"
              :key="index"
            >
              <span class="titleTxt1">
                {{ item.trainName }}
              </span>
              <span class="timeTxt1" style="margin-top: 16px"
                >培训时间：{{ item.startTime }} - {{ item.endTime }}</span
              >
              <div class="cOicon-id" style="margin-top: 24px">
                <img
                  class="imgagesOne"
                  src="@/assets/image/companyIcon1.png"
                  alt=""
                />
                <p>{{ item.comName }}</p>
              </div>
              <span
                v-if="1"
                class="titleTxt7"
                style="margin-top: 16px; display: block"
              >
                <a-icon style="margin-right: 6px;color:#EEB336;" type="star" />
                已收藏
              </span>
              <span
                v-else
                class="titleTxt7"
                style="margin-top: 16px; display: block"
                ><a-icon style="margin-right: 6px" type="star" />
                收藏
              </span>
            </div>
          </div>
        </div>
      </a-tab-pane> -->
      <a-tab-pane key="4" tab="就业职位" force-render>
        <div>
          <ul class="workList">
            <li v-for="(item, index) in collectList" :key="index">
              <p
                class="workTitle"
                @click="
                  $router.push(
                    '/employment/positionDetail?jobCode=' + item.jobCode
                  )
                "
              >
                {{ item.name }}
              </p>
              <div
                class="msg"
                @click="
                  $router.push(
                    '/employment/positionDetail?jobCode=' + item.jobCode
                  )
                "
              >
                <div class="welfare">
                  <div class="navs">
                    <p class="maney" v-if="item.payType == 1">
                      {{ item.minPay
                      }}<span v-show="item.minPay && item.maxPay">K-</span
                      >{{ item.maxPay
                      }}<span v-show="item.minPay && item.maxPay">K</span>/月
                    </p>
                    <p class="maney" v-if="item.payType == 2">
                      {{ item.maxPay }}元/日
                    </p>
                    <p class="maney" v-if="item.payType == 3">面议</p>
                    <div class="nav">
                      <p>{{ item.degree }}</p>
                      <p class="line" v-if="item.degree">|</p>
                      <p>{{ item.workExper }}</p>
                      <p class="line" v-if="item.workExper">|</p>
                      <p>{{ item.disaType }}</p>
                    </div>
                  </div>
                  <div class="treatment" v-if="item.welfare">
                    <p
                      v-for="(i, j) in item.welfare.split('、')"
                      v-show="j < 3"
                      :key="j"
                    >
                      {{ i }}
                    </p>
                  </div>
                </div>
                <div class="company" v-show="item.comName">
                  <img
                    :src="imageWebUrl + item.comLogo"
                    @error="$event.target.src = GLOBAL.defaultIconImg"
                    alt=""
                    class="worklogo"
                  />
                  <div class="synopsis">
                    <p class="companyname">{{ item.comName }}</p>
                    <p class="synop">
                      {{ item.comNature }} <span v-if="item.comNature">|</span>
                      {{ item.comTrade }} <span v-if="item.comTrade">|</span>
                      {{ item.scale }}
                    </p>
                  </div>
                </div>
              </div>
              <div class="links dlex2-div">
                <p v-if="item.couseList && item.couseList.length">
                  相关课程：<span v-for="(i, j) in item.couseList" :key="j" @click="getJumpVideo(i)">
                    {{ i.name }}
                    <!-- <span v-if="item.policies == 1"
                      ><a :href="item.couseList[0].webUrl">{{
                        item.couseList[0].detail
                      }}</a></span
                    ><span v-if="item.policies == 2">{{
                      item.couseList[0].detail
                    }}</span> -->
                  </span>
                </p>
                <div></div>
                <p>
                  <!-- 相关课程：<span
                    > <span v-if="item.couseList[0]">{{item.couseList[0].webName}}</span> <a :href="item.couseList[0].webUrl">{{item.couseList[0].webName}}</a></span
                  > -->
                </p>
                <span
                  v-if="1"
                  class="titleTxt7"
                  style="cursor: pointer"
                  @click="collectSave(item.jobCode, 5)"
                >
                  <a-icon
                    style="margin-right: 6px; color: #eeb336"
                    type="star"
                  />
                  已收藏
                </span>
                <span v-else class="titleTxt7" style="margin-left: 115px"
                  ><a-icon style="margin-right: 6px" type="star" />
                  收藏
                </span>
              </div>
            </li>
          </ul>
        </div>
      </a-tab-pane>
      <a-tab-pane key="5" tab="创业项目" force-render>
        <div style="overflow: hidden">
          <div
            class="listDiv"
            v-for="(item, index) in collectList"
            :key="index"
          >
            <div
              class="dlex3-div"
              @click="
                $router.push('/employment/projectDetail?id=' + item.itemNo)
              "
            >
              <div class="image1" style="width: 152px">
                <img
                  :src="imageWebUrl + item.photo"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                />
              </div>
              <div style="width: 650px">
                <span class="titleTxt1" style="font-weight: 600">
                  {{ item.itemName }}
                </span>
                <div
                  style="margin-top: 16px"
                  v-if="item.labelList && item.labelList.length"
                >
                  <span
                    style="margin-right: 15px"
                    v-for="(i, j) in item.labelList"
                    :key="j"
                    class="squareLabel"
                    >{{ i.name }}</span
                  >
                </div>
                <div style="margin-top: 16px" v-if="item.itemTrait">
                  <span class="smallPrint" style="color: #333333"
                    >项目特点：</span
                  >
                  <span class="smallPrint">{{ item.itemTrait }}</span>
                </div>
              </div>
            </div>
            <div class="dlex2-div dloDiv">
              <div
                class="cOicon-id"
                style="flex: 1"
                v-show="item.contactsFlag == 'Y'"
              >
                <img
                  v-show="item.contacts"
                  class="imgagesFour"
                  src="@/assets/image/employment/name.png"
                  alt=""
                />
                <p style="font-size: 13px; margin-left: 8px">
                  {{ item.contacts }}
                </p>
                <img
                  v-show="item.phone"
                  class="imgagesFour"
                  style="margin-left: 32px"
                  src="@/assets/image/employment/phone.png"
                  alt=""
                />
                <p style="font-size: 13px; margin-left: 8px">
                  {{ item.phone }}
                </p>
                <img
                  v-show="item.otherContact"
                  class="imgagesFour"
                  style="margin-left: 32px"
                  src="@/assets/image/employment/weixin.png"
                  alt=""
                />
                <p style="font-size: 13px; margin-left: 8px">
                  {{ item.otherContact }}
                </p>
              </div>
              <div></div>
              <div>
                <span
                  class="contactBtn"
                  v-show="item.contactsFlag != 'Y'"
                  @click="getPhone(item.itemNo)"
                  >获取联系方式</span
                >
                <span
                  v-if="1"
                  @click="collectSave(item.itemNo, 4)"
                  class="titleTxt7"
                  style="margin-left: 32px"
                >
                  <a-icon
                    style="margin-right: 6px; color: #eeb336"
                    type="star"
                  />
                  已收藏
                </span>
                <span v-else class="titleTxt7" style="margin-left: 32px"
                  ><a-icon style="margin-right: 6px" type="star" />
                  收藏
                </span>
              </div>
            </div>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="6" tab="文体活动" force-render>
        <div class="coRsingleCF">
          <div
            class="oEimg-txt5"
            v-for="(item, index) in collectList"
            :key="index"
          >
            <div
              class="oEimage4"
              @click="
                $router.push(
                  '/activity/activityDetails?iscenter=true&id=' + item.eventNo
                )
              "
            >
              <img class="imgborder" :src="imageWebUrl + item.cover" alt="" />
              <!-- 展示状态的图片 -->
              <img
                v-if="item.eventStatus == 1"
                class="image2"
                src="@/assets/image/icon_start.png"
                alt=""
              />
              <img
                v-if="item.eventStatus != 5 && item.eventStatus != 1"
                class="image2"
                src="@/assets/image/icon_conduct.png"
                alt=""
              />
              <img
                v-if="item.eventStatus == 5"
                class="image2"
                src="@/assets/image/icon_End.png"
                alt=""
              />
            </div>
            <span
              class="oEspan9"
              style="margin-left: 16px"
              @click="
                $router.push(
                  '/activity/activityDetails?iscenter=true&id=' + item.eventNo
                )
              "
              >{{ item.title }}</span
            >
            <div
              style="display: flex; align-items: baseline; margin-top: 2px"
              @click="
                $router.push(
                  '/activity/activityDetails?iscenter=true&id=' + item.eventNo
                )
              "
            >
              <span class="oEspan10"
                ><img
                  src="@/assets/image/time_icon.png"
                  width="20"
                  alt=""
                />&nbsp;&nbsp;{{ item.evenDate }}</span
              >

              <span class="aLspan3" v-if="item.eventStatus">{{
                item.eventStatus == 1
                  ? "未开始"
                  : item.eventStatus == 2
                  ? "报名中"
                  : item.eventStatus == 3
                  ? "报名结束"
                  : item.eventStatus == 4
                  ? "进行中"
                  : item.eventStatus == 5
                  ? "已结束"
                  : ""
              }}</span>
            </div>
            <span
              class="oEspan10"
              @click="
                $router.push(
                  '/activity/activityDetails?iscenter=true&id=' + item.eventNo
                )
              "
              ><img
                v-show="item.eventAddress"
                src="@/assets/image/employment/place.png"
                width="20"
                alt=""
              />&nbsp;&nbsp;{{ item.eventAddress }}</span
            >

            <div class="aLbottom">
              <span></span>
              <!-- <span @click="collectSave(item.eventNo)">已收藏</span> -->
              <span
                  v-if="1"
                  @click="collectSave(item.eventNo)"
                  class="titleTxt7"
                  style="margin-left: 32px"
                >
                  <a-icon
                    style="margin-right: 6px; color: #eeb336"
                    type="star"
                  />
                  已收藏
                </span>
                <span v-else class="titleTxt7" style="margin-left: 32px"
                  ><a-icon style="margin-right: 6px" type="star" />
                  收藏
                </span>
            </div>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <!-- 分页器 -->
    <div>
      <a-pagination
        style="text-align: center; margin-top: 30px"
        v-model="current"
        :hideOnSinglePage="true"
        :total="total"
        :pageSize="pageSize"
        show-less-items
        @change="fontnbr"
      />
    </div>
    <a-empty
      :image="imgUrl"
      :image-style="{
        height: '220px',
      }"
      style="margin: 0 auto; margin-top: 30px"
      v-if="collectList.length == 0 && flag"
    />
    <Loading v-show="onLoading"></Loading>
  </div>
</template>



<script>
export default {
  data() {
    return {
      imgUrl: require("@/assets/image/pagint.png"),
      callbackkey: 1,
      defaultkey: 1,
      current: 1,
      mosgolor: 1,
      // 列表
      collectList: [],
      // 总数
      total: 0,
      pageSize: 4,
      pageIndex: 1,
      flag: false,
      onLoading: false,
    };
  },
  created() {
    if (this.$route.query.type) {
      this.defaultkey = this.$route.query.type;
      this.callbackkey = this.$route.query.type;
    }
  },
  mounted() {
    this.getCollectList();
  },
  methods: {
    // 跳转视频播放页
    getJumpVideo(e) {
      this.$router.push(
        "/video/detailsVideo?courseNo=" +
          e.courseNo +
          "&learnedTime=" +
          e.learnedTime
      );
    },
    // 获取联系方式
    getPhone(e) {
      this.$ajax({
        url: "/user/useritem/save",
        method: "post",
        params: {
          itemNo: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getCollectList();
        }
      });
    },
    //分页
    fontnbr(e) {
      this.pageIndex = e;
      this.getCollectList();
    },
    callback(key) {
      this.flag = false;
      this.callbackkey = key;
      this.pageIndex = 1;
      this.total = 0;
      this.collectList = [];
      this.getCollectList();
    },
    // 获取收藏列表
    getCollectList() {
      this.onLoading = true;
      this.$ajax({
        url:
          "/user/usercollect/list?type=" +
          this.callbackkey +
          "&pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false;
          this.collectList = res.data.list;
          this.total = res.data.totalCount;
        } else {
          this.onLoading = false;
        }
      });
    },
    // 取消收藏
    collectSave(e, i) {
      this.$ajax({
        url: "/user/usercollect/save",
        method: "post",
        params: {
          collectType: i ? i : this.callbackkey,
          collectCode: e,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getCollectList();
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.listDiv {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  float: left;
  margin-bottom: 24px;
  cursor: pointer;
  padding: 12px;
  padding-right: 24px;
  margin-left: 1px;
  -moz-transition: all ease 1s;
  -o-transition: all ease 1s;
  transition: all ease 1s;
  .image1 {
    width: 174px;
    height: 120px;
    margin-right: 32px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .dloDiv {
    width: 847px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    padding-top: 16px;
    border-top: #eeeeee solid 1px;
  }
}
.cFimg1 {
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 70px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  //改变方向
  align-items: center;
  .cFspan2 {
    width: 48px;
    display: block;
    overflow-wrap: break-word;
    color: #de1e1e;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    white-space: nowrap;
    line-height: 30px;
    padding-left: 17px;
  }
}
.oEimg-txt5 {
  width: 373px;
  background-color: rgb(255, 255, 255);
  margin-left: 40px;
  cursor: pointer;
  padding-bottom: 16px;
  &:first-child {
    margin-left: 0px;
  }
}
.oEimg-txt5:nth-child(2n - 1) {
  margin-left: 0;
}
.oEimage4 {
  width: 373px;
  height: 213px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
    transition: transform 0.5s linear;
  }
  img:hover {
    transform: scale(1.1, 1.1);
  }
}
.oEspan9 {
  display: block;
  overflow-wrap: break-word;
  color: #000000;
  font-size: 16px;
  font-family: PingFangSC-Medium;
  white-space: nowrap;
  line-height: 22px;
  text-align: justify;
  align-self: center;
  margin-top: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s linear;
}
.oEspan9:hover {
  color: @theme;
}
.oEspan10 {
  display: block;
  overflow-wrap: break-word;
  color: #999999 100%;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  white-space: nowrap;
  padding-left: 17px;
  margin-top: 8px;
  width: 258px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aLspan3 {
  background-color: rgba(255, 149, 77, 1);
  margin-right: 15px;
  padding: 5px 5px;
  font-size: 10px;
  color: #ffffff;
  font-family: PingFangSC-Regular;
}
.aLbottom {
  width: 373px;
  height: 40px;
  border: #cccccc;
  border-top: #dedede solid 1px;
  margin-top: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  span {
    padding-right: 20px;
  }
  .aLspan1 {
    float: left;
    width: 125px;
    overflow: hidden;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    padding-top: 10px;
    text-align: left;
    padding-left: 17px;
    flex: 1;
  }
  .aLspan2 {
    float: right;
    display: block;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    padding-top: 10px;
    margin-right: 8px;
  }
}
// 培训样式
.coRsingleCF {
  width: 100%;
  .listDiv {
    width: 392px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
    padding: 20px;
    float: left;
    margin-left: 24px;
    margin-bottom: 20px;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    transition: all ease 1s;
  }
  .listDiv:nth-child(2n-1) {
    margin-left: 0px;
  }
}
//就业
.workList {
  li {
    cursor: pointer;
    width: 100%;
    // height: 206px;
    padding: 30px 20px 10px;
    margin: 0 auto;
    margin-bottom: 16px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
    .workTitle {
      color: #333333;
      font-size: 18px;
      line-height: 25px;
      font-weight: bold;
    }
    .msg {
      margin-top: 16px;
      display: flex;
      padding-bottom: 21px;
      .welfare {
        width: 483px;
        .navs {
          height: 25px;
          display: flex;
          align-items: center;
          .maney {
            color: #ffbe37;
            font-size: 18px;
            line-height: 25px;
          }
          .nav {
            display: flex;
            margin-left: 24px;
            p {
              color: #666666;
              font-size: 12px;
              line-height: 17px;
            }
            .line {
              margin: 0 20px;
            }
          }
        }
        .treatment {
          display: flex;
          margin-top: 16px;
          p {
            padding: 0 15px;
            color: #ffbe37;
            font-size: 12px;
            line-height: 22px;
            text-align: center;
            // background: #FFE9D9;
            // border-radius: 2px;
            border: 1px solid #ffbe37;
            margin-right: 16px;
            // cursor: pointer;
          }
        }
      }
      .company {
        flex: 1;
        display: flex;
        .worklogo {
          width: 60px;
          height: 50px;
        }
        .synopsis {
          margin-left: 19px;
          padding-top: 3px;
          .companyname {
            color: #000000;
            font-size: 13px;
            line-height: 18px;
          }
          .synop {
            margin-top: 10px;
            color: #999999;
            font-size: 12px;
            line-height: 17px;
          }
        }
      }
    }
    .links {
      border-top: 1px solid #eeeeee;
      padding-top: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      p {
        margin-right: 40px;
        color: #333333;
        font-size: 12px;
        line-height: 17px;
        display: flex;
        a {
          display: inline-block;
          width: 500px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-decoration: underline;
        }
        span {
          display: inline-block;
          margin-left: 8px;
          // width: 500px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #0d4fae;
          // text-decoration: underline;
        }
      }
    }
  }
}
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  color: #333333;
  text-shadow: 0 0 0.25px currentColor;
  font-weight: 600;
}
/deep/.ant-pagination-item-active a {
  color: #333333;
  background-color: #ffbe37;
}
</style>
